<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		body{
			background: #dedede;
		}
		ul{
			list-style: none;	
		}
		a{
			text-decoration: none;
		}
		.header{
			height: 60px;
			background: #333333;
		}
		.header img{
			float: left;
		}
		.nav{
			float: right;
		}
		.nav ul li{
			float: left;
			line-height: 60px;
		}
		.nav ul li a{
			padding-right: 20px;
			color:#d8e9e3;

		}
		.nav ul .last a{
			color:#929294;
		}
		.nav ul{
			list-style-type: disc;
		}
		article{
			border:1px solid #cdcdcd;
			padding:34px 18px 38px 22px;
			margin:20px;
			background: #ffffff;
			font:14px/28px "微软雅黑";
		}

		article h2{
			font:22px/32px "微软雅黑";
		}
		article h3{
			font:14px/40px "微软雅黑";
		}
		article .author{
			font:10px/24px "微软雅黑";
		}
		.article_02_list {
			padding-left:22px;
		}
		.img_list li{
			border:1px solid #cecece;
			width: 120px;
			height: 124px;
			text-align: center;
			margin:7px 38px;
		}
		.article_04 .order_list{
			padding: 14px 0 14px 40px;

		}
		.article_04 .table_info{
			border-spacing: 0;
			border-collapse: collapse;
			width:100%;
		}
		.article_04 .table_info td{
			border:1px solid #e6e6e6;
		}
		.article_04 .table_info tr:first-child{
			background:#333333;
			color:#ffffff;
			text-align: left
		}
		.article_04 .table_info tr:last-child{
			background:#cccccc;
		}
		.article_05 table{
			margin-left: 268px;
		}
		.article_05 table tr td:first-child{
			text-align: right;
		}
		.article_05 table .classb9b7b8{
			color:#b9b7b8;
		}
		.article_05 #sub{
			background: #3355d0;
			color:#fff;
			width: 100%;
			height: 38px;
			line-height: 32px;
			border-radius: 10px;
		}
		.footer{
			background:black;
			color:#fff;
			height: 48px;
			text-align: center;
			padding-top:22px;
			font-size: 12px;
		}
	</style>
</head>
<body>
	<header class="header">
		<img src="images/logo.jpg" alt="">
		<nav class="nav">
			<ul>
				<li><a href="">导航链接一</a></li>
				<li><a href="">导航链接二</a></li>
				<li><a href="">导航链接三</a></li>
				<li class="last"><a href="">导航链接四</a></li>
			</ul>
		</nav>	
	</header>
			<article class="article_01">
			<header>
				<h2>文章一级标题</h2>
				<h3>文章二级标题</h3>
				<p class="author">文章作者 文章发布时间</p>
			</header>
			<p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br>这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
			<img src="images/img.jpg" alt="">
			<p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
		</article>
		<article class="article_02">
			<header>
				<h2>另一篇文章一级标题</h2>
				<h3>文章二级标题</h3>
				<p class="author">文章作者 文章发布时间</p>
			</header>
			<p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br>这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<b>这里有个粗体字</b>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
			<img src="images/img.jpg" alt="">
			<ul class="article_02_list">
				<li>列表项目一</li>
				<li>列表项目二</li>
				<li>列表项目三</li>
				<li>列表项目四</li>
			</ul>

		</article>
		<article class="article_03">
			<header>
				<h2>图片</h2>
			</header>
			<ul class="img_list">
				<li>
					<p>好看的图片</p>
					<img src="images/img_01.jpg" alt="">
				</li>
				<li>
					<p>好看的图片</p>
					<img src="images/img_01.jpg" alt="">
				</li>
				<li>
					<p>好看的图片</p>
					<img src="images/img_01.jpg" alt="">
				</li>
				<li>
					<p>好看的图片</p>
					<img src="images/img_01.jpg" alt="">
				</li>
				<li>
					<p>好看的图片</p>
					<img src="images/img_01.jpg" alt="">
				</li>
				<li>
					<p>好看的图片</p>
					<img src="images/img_01.jpg" alt="">
				</li>
				<li>
					<p>好看的图片</p>
					<img src="images/img_01.jpg" alt="">
				</li>
				<li>
					<p>好看的图片</p>
					<img src="images/img_01.jpg" alt="">
				</li>
				<li>
					<p>好看的图片</p>
					<img src="images/img_01.jpg" alt="">
				</li>
				<li>
					<p>好看的图片</p>
					<img src="images/img_01.jpg" alt="">
				</li>

			</ul>
		</article>
		<article class="article_04">
			<h2>最后一篇文章一级标题</h2>
			<h3>文章二级标题</h3>
			<p>文章作者 文章发布时间</p>
			<ol class="order_list">
				<li>排名1</li>
				<li>排名2</li>
				<li>排名3</li>
			</ol>
			<span>下面是一个表格，我这里给表格加了一个border="1"好让你看出是一个表格，你们不用写html时候不需要加</span>
			<table class="table_info">
				<tr>
					<th>表头</th>
					<th>表头</th>
					<th>表头</th>
				</tr>
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td><a href="">操作</a></td>
				</tr>		
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td><a href="">操作</a></td>
				</tr>		
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td><a href="">操作</a></td>
				</tr>		
				<tr>
					<td>表内容单元格</td>
					<td>表内容单元格</td>
					<td><a href="">操作</a></td>
				</tr>		
				<tr>
					<td>总计</td>
					<td colspan='2'>1000</td>
				</tr>
			</table>
		</article>
		<article class="article_05">
			<h2>这里以后是一个侧栏，这是侧栏的标题</h2>
			<form action="" method="post">
				<table>
					<tr>
						<td>请输入邮箱地址：</td>
						<td><input type="text" name="email" id=""></td>
					</tr>
					<tr class="classb9b7b8">
						<td></td>
						<td>邮箱地址请按要求格式输入</td>
					</tr>
					<tr>
						<td>请输入密码：</td>
						<td><input type="password" name="password" id=""></td>
					</tr>
					<tr>
						<td>请重复输入密码：</td>
						<td><input type="password" name="paddword1" id=""></td>
					</tr>
					<tr class="classb9b7b8">
						<td></td>
						<td>密码请为6-16位英文数字</td>
					</tr>
					<tr>
						<td>性别：</td>
						<td><input type="radio" name="sex" checked id="" value="1">男<input type="radio" name="sex" value='0' id="">女</td>
					</tr>
					<tr>
						<td>城市：</td>
						<td><select name="city" id=""><option value="bj">北京</option></select></td>
					</tr>
					<tr>
						<td>爱好：</td>
						<td><input type="checkbox" name="love[]" id="" value="sport">运动<input type="checkbox" name="love[]" id="" value="art">艺术<input type="checkbox" name="love[]" value="science" id="">科学 </td>
					</tr>
					<tr>
						<td>个人描述：</td>
						<td><textarea name="" id="" cols="30" rows="10"></textarea></td>
					</tr>
				</table>
				<input type="submit" value="确认提交" id="sub">
			</form>
		</article>
	<footer class="footer">
		版权所有&copy;
	</footer>
</body>
</html>